<template>
  <!-- 产品基本信息 -->
  <div class="product-info">
      <el-row>
        <el-col :span="6">
          <img :src="productImage" alt="兔头" class="product-image" />
        </el-col>
        <el-col :span="18">
          <h2 class="product-name">{{ productName }}</h2>
          <p class="product-detail">生产批次：{{ productionBatch }}</p>
          <p class="product-detail">保质期：{{ shelfLife }} 天</p>
          <p class="product-detail">生产许可证号：{{ productionLicense }}</p>
          <p class="product-detail">生产企业：{{ productionEnterprise }}</p>
          <h3 class="product-detail">产品检验报告</h3>
      <el-upload
        action="#"
        :show-file-list="false"
        :before-upload="beforeUpload"
      >
        <el-button type="primary">上传报告</el-button>
      </el-upload>
          <div class="product-actions">
            <el-button size="small" @click="editBasicInfo">修改基本信息</el-button>
            <el-button size="small" @click="exportQRCode">导出溯源码</el-button>
          </div>
        </el-col>
      </el-row>
      <el-divider class="divider" />
      <RouterLink to="/RabbitRarm">养殖信息</RouterLink>
      <RouterLink to="/CarcassList">屠宰信息</RouterLink>
      <RouterLink to="/ProcessList">深加工信息</RouterLink>
    </div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { ElMessage } from 'element-plus';

// 产品基本信息
const productImage = 'https://example.com/rabbit - head.jpg'; // 替换为实际图片路径
const productName = '兔头（麻辣味）';
const productionBatch = '20210718';
const shelfLife = 90;
const productionLicense = 'SC132054276860';
const productionEnterprise = '成都蜀兔食品加工有限公司';

// 编辑基本信息方法
const editBasicInfo = () => {
  ElMessage.info('编辑基本信息功能暂未实现');
};

// 导出溯源码方法
const exportQRCode = () => {
  ElMessage.info('导出溯源码功能暂未实现');
};

// 上传文件前的处理
const beforeUpload = (file: any) => {
  ElMessage.info('上传功能暂未实现');
  return false;
};
</script>